<template>
   <h4>获取store里面的数据</h4>
   <h3> 1. 直接获取 {{ $store.state.count }}</h3>
   <h3> 2. 通过computed获取 {{ myCount }}</h3>
   <h3> 3. 通过mapState获取,写法1数组形式 {{ count }}</h3>
   <h3> 3. 通过mapState获取,写法2对象形式 {{ key1 }}</h3>

   <!-- commit(mutation的名字,传递给这个mutation的参数[是可选的]) -->
   <p>commit提交mutation修改数据</p>
   <button @click="$store.commit('addCount')">count++</button>
   <button @click="$store.commit('jianshao',10)">count-10</button>

   <p>mapMutations辅助函数,修改数据</p>
   <button @click="addCount">count++</button>
   <button @click="subCount">count--</button>
   <!-- 注意： 这些映射的函数，第一个参数就是 mutation 的payload;
         如果方法后写了（），如addCount(),里面写的数值就是传递的payload;
         如果没有写（），如addCount,那么传递的就是事件对象   -->
   <hr>

   <!--  dispatch(action的名字, 传递给这个action的参数[可选]) -->
   <button @click="$store.dispatch('asyncAddCount',10)">直接派发动作</button>
   <button @click="$store.dispatch('asyncSubCount')">派发动作,count--</button><br>

   <button @click="asyncAddCount">辅助函数派发动作count++</button>
   <button @click="asyncSubCount">辅助函数派发动作count--</button>
   <!-- 注意，如果传递参数，asyncAddCount（参数），参数会直接传递给payload; 如果不传， payload 是事件对象 -->


   <h4>获取getters里面的数据</h4>
   <h3> 1. 直接获取 {{ $store.getters.plusCount }}</h3>
   <h3> 2. 通过computed获取 {{ myPlusCount }}</h3>
   <h3> 3. 通过mapGetters获取,写法1数组形式 {{ plusCount }} {{ reverseTips }}</h3>

   <BasicLayout></BasicLayout>
</template>

<script >
// 可以使用 @路径别名，找路径会比较方便，后续如果路径发送变化，只需修改一处即可
import BasicLayout from '@/layout/basic-layout.vue'

// 引入 Vuex 中的辅助函数
/**
 *  mapState/ mapGetters
 *   用法一样  =》  配合 computed使用
 * 
 * 语法1（数组形式） ：
 *    mapState(['aa1','aa2'])   // aa1 是store中的变量名
 *    返回的格式如下：
 *    {
 *       aa1(){
 *          return this.$stote.state.aa1
 *       },
 *       aa2(){
 *          return this.$stote.state.aa1
 *       },  
 *    }
 * 
 *  语法2（对象形式）：
 *    mapState({
 *       key1:'count'
 *    })
 *    返回的格式如下：
 *    {
 *       key1(){   //好处是，得到的计算属性不会与state中的变量名同名(换个名字)
 *          return this.$store.state.count
 *       }
 *    }
 * 
*/

/**  mapMutations,  mapActions 辅助函数
 *    需要配合组件的 methods 选项使用
 *    返回的是一个对象， 可以使用展开运算符来玩。
 * */ 
import { mapState,mapGetters , mapMutations,mapActions } from 'vuex';


export default {
   components: {
      BasicLayout
   },

   // 不推荐写法： 原因是，没办法再写组件自己的computed了
   // computed:mapState(['count']),

   computed: {  // 计算属性获取store中的数据
      myCount() {
         return this.$store.state.count;
      },
      // 推荐使用：展开运算符 ...  这样不影响组件的computed 的使用
      ...mapState(['count']), //映射 仓库中的count到组件的count上面（同名）
       
      // count(){   // 返回的是这样的形式
      //     return this.$stote.state.count
      //  },

      ...mapState({
         key1:'count'   // 映射 仓库中的count到组件的key1上面（不同名）
      }),

      myPlusCount(){
         return this.$store.getters.plusCount
      },
      ...mapGetters(['plusCount','reverseTips'])
      // 映射 仓库中的plusCount到组件的plusCount上面
      // 映射 仓库中的reverseTips到组件的reverseTips上面

      
   },


   methods:{
      // mapMutations(['mutations里面方法的名字'])
      //  映射 仓库中的 addCount 这个mutations 到  当前组件的 addCount 这个方法上，然后就可以直接使用了
      //  映射 仓库中的 subCount 这个mutations 到  当前组件的 subCount 这个方法上，然后可以直接使用
      ...mapMutations(['addCount','subCount']),


      /*
      store中的 asyncAddCount =》 组件中的 asyncAddCount，然后直接使用
      store中的 asyncSubCount =》 组件中的 asyncSubCount，然后直接使用
      */ 
      ...mapActions(['asyncAddCount','asyncSubCount'])

   },
   

   mounted() {
      console.log("===this.$state", this.$store);
   }
}
</script>

 